<template>
  <el-dialog v-model="show" title="权限管理" @opened="setCheckedKey">
    <el-scrollbar height="600px">
      <el-tree
        :data="drawerProps?.parentList"
        node-key="count"
        :props="props"
        :show-checkbox="true"
        :check-on-click-node="true"
        ref="treeRef"
        :check-strictly="true"
      ></el-tree>
    </el-scrollbar>
    <template #footer>
      <el-button type="primary" @click="confirm">确认</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage, ElTree } from "element-plus";
import { nextTick, ref } from "vue";
import { changePower } from "@/api/modules/role";

const show = ref(false);
const treeRef = ref<InstanceType<typeof ElTree> | null>();

interface DrawerProps {
  row: any;
  parentList: any;
  flatList: any;
  api?: (params: any) => Promise<any>;
  getTable?: () => Promise<any>;
}

const props = {
  label: "name",
  children: "children"
};

const drawerProps = ref<DrawerProps>();

// 找出对应的路由以及api的count
const findApis = (list: any[], treeList: any[]) => {
  let newList1: any[] = [];
  let newList2: any[] = [];
  for (let i = 0; i < treeList.length; i++) {
    for (let j = 0; j < treeList[i].children.length; j++) {
      if (treeList[i].children[j].type === "api") {
        newList1.push(treeList[i].children[j]);
      }
    }
  }
  for (let i = 0; i < list.length; i++) {
    const index = newList1.findIndex((e: any) => e.name === list[i].api_name);
    newList2.push(newList1[index].count);
  }
  return newList2;
};

const findRoutes = (list: any[], treeList: any[]) => {
  let newList1: any[] = [];
  let newList2: any[] = [];
  for (let i = 0; i < treeList.length; i++) {
    if (treeList[i].type === "route") {
      newList1.push(treeList[i]);
    }
  }
  for (let i = 0; i < list.length; i++) {
    const index = newList1.findIndex((e: any) => e.name === list[i].meta.title);
    newList2.push(newList1[index].count);
  }
  return newList2;
};

const nowCheckList = ref<any[]>([]);

const acceptParams = (params: any) => {
  drawerProps.value = params;
  const list1 = findApis([...drawerProps.value?.row.apis], drawerProps.value?.flatList);
  const list2 = findRoutes([...drawerProps.value?.row.routes], drawerProps.value?.flatList);
  nowCheckList.value = [...list1, ...list2];
  console.table(drawerProps.value?.flatList);
  show.value = true;
};

const confirm = async () => {
  const list = treeRef.value?.getCheckedNodes() as any;
  let apis: number[] = [];
  let routes: number[] = [];
  for (let i = 0; i < list?.length; i++) {
    if (list[i].type === "route") {
      routes.push(list[i].id);
    } else {
      apis.push(list[i].id);
    }
  }
  const params = { routes, apis, roleId: drawerProps.value?.row.id };
  try {
    await changePower(params);
    ElMessage.success("成功");
    await drawerProps.value?.getTable!();
    show.value = false;
  } catch (error) {}
};

const setCheckedKey = () => {
  // return;
  nextTick(() => {
    treeRef.value?.setCheckedKeys(nowCheckList.value, false);
  });
};

defineExpose({
  acceptParams
});
</script>

<style></style>
